<template>
  <transition name="translate">
    <div class="using-wrap">
      <common-back :content="headerTitle"
                   class="header"></common-back>
      <common-loading v-show="showLoading"></common-loading>
      <ul class="list"
          v-show="!showLoading">
        <li class="item"
            border-bottom-1px
            v-for="(item,index) of list"
            :key="item.id"
            @click="handleDetail(item.id,item.title)">{{index+1}}、{{item.title}}</li>
      </ul>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonLoading from 'common/loading/loading'
import { mapState } from 'vuex'
export default {
  name: 'using',
  components: {
    CommonBack,
    CommonLoading
  },
  data () {
    return {
      headerTitle: '使用帮助',
      list: [],
      showLoading: true
    }
  },
  created () {
    this.getState()
  },
  methods: {
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getList()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getList () {
      this.$api.person.useIngHelp()
        .then(this.getListSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getListSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.list = data.lists
      }
    },
    handleDetail (id, title) {
      this.$router.push({
        path: `/article/${id}`,
        query: {
          title
        }
      })
    }
  },
  computed: {
    ...mapState(['person', 'contact', 'bank'])
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.using-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 30
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 134px

  .list
    width 100%
    background $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 24px

    .item
      padding-left 32px
      padding-right 32px
      box-sizing border-box
      height 110px
      line-height 110px
      font-size $shop_name
      font-weight 400
      color $id_input
      text-indent 30px
      width 100%
      ellipsis()

      &:active
        background-color $tab_touch

      &:nth-last-of-type(1)
        border none

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
